<template>
<div class="layerRtb layerRtb-threecolumn">
    <three-title :title="{name:'完工'}"></three-title>
    <div class="layerRtb-scroll thinScroll" v-scrollHeight = "137">
        <div class="analyItem">
            <p class="analyItemTit tx-center">级别</p>
            <div class="analyItemCon">
                <p class="col-md-4">
                    <span class="cLightGray pr8">级别</span>
                    <span>{{personnel.manageLevel}}</span>
                </p>
                <p class="col-md-4">
                    <span class="cLightGray pr8">标准</span>
                    <span>{{personnel.sumGreatMore}}万</span>
                </p>
                <p class="col-md-4">
                    <span class="cLightGray pr8">已完</span>
                    <span>{{personnel.sumCompletionMoney}}W</span>
                </p>
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">项目</p>
            <div class="analyItemCon">
                <p class="col-md-4">
                    <span class="cLightGray pr8">应完</span>
                    <span>{{completmet.shouldCompleted}}</span>
                </p>
                <p class="col-md-4">
                    <span class="cLightGray pr8">金额</span>
                    <span :data-title="completmet.shouldCompletedMoney">{{(completmet.shouldCompletedMoney / 10000).toFixed(2)}}W</span>
                </p>
                <p class="col-md-4">
                    <span class="cLightGray pr8">日期</span>
                    <span>{{formatDate(new Date())}}</span>
                </p>
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">未完</p>
            <div class="analyItemCon">
                <p class="col-md-4">
                    <span class="cLightGray pr8">未完</span>
                    <span>{{completmet.shouldCompleted - completmet.Completed}}</span>
                </p>
                <p class="col-md-4">
                    <span class="cLightGray pr8">金额</span>
                    <span :data-title="completmet.shouldCompletedMoney - completmet.CompletedMoney">{{((completmet.shouldCompletedMoney - completmet.CompletedMoney ) / 10000).toFixed(2)}}W</span>
                </p>
                <p class="col-md-4">
                    <span class="cLightGray pr8">日期</span>
                    <span>{{formatDate(new Date())}}</span>
                </p>
            </div>
        </div>
    </div>
    <div class="layerRtb-footer">
        <div class="analyItem">
            <p class="analyItemTit tx-center">综合</p>
            <div class="analyItemCon">
                <p class="col-md-3">
                    <span class="cLightGray pr8">应完</span>
                    <span>{{completmet.thisMonthShouldCompleted}}</span>
                </p>
                <p class="col-md-3">
                    <span class="cLightGray pr8">超期未完</span>
                    <span>{{completmet.thisMonthShouldCompleted - completmet.thisMonthCompleted}}</span>
                </p>
                <p class="col-md-3">
                    <span class="cLightGray pr8">超期金额</span>
                    <span :data-title="completmet.thisMonthShouldCompletedMoney - completmet.thisMonthCompletedMoney">{{((completmet.thisMonthShouldCompletedMoney - completmet.thisMonthCompletedMoney)  / 10000).toFixed(2)}}W</span>
                </p>
                <p class="col-md-3">
                    <span class="cLightGray pr8">完工率</span>
                    <span class="">{{(completmet.thisMonthCompletedRate * 100).toFixed(2)}}%</span>
                </p>
            </div>
        </div>

    </div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { getDivisionPersonnel, getCompletedVSecond } from '../../Resources/Api'
export default {
    data () {
        return {
            parmasExample: {
                name: '',
                age: ''
            },
            completed: {}, // 人事
            completedMap: {},
            personnel: {},
            completmet: {}
            // projectEvaluationList: []
        }
    },
    created () {
        this.getDivisionPersonnel()
        this.getCompletedVSecond()
    },
    computed: {
        ...mapGetters(['userInfo', 'leftInfo'])
    },
    methods: {
        getCompletedVSecond () {
            getCompletedVSecond({
                regionID: this.leftInfo.u_diqu
            }).then(res => {
                if (res.data.StatusCode === 0) {
                    this.completmet = res.data.Body.completedMap
                }
            }).catch(err => {
                console.log(err)
            })
        },
        getDivisionPersonnel () {
            getDivisionPersonnel({
                diqu: this.leftInfo.u_diqu
            }).then(res => {
                if (res.data.StatusCode === 0) {
                    this.personnel = res.data.Body
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 时间转换
        formatDate (value) {
            let date = new Date(value)
            let y = date.getFullYear()
            let MM = date.getMonth() + 1
            MM = MM < 10 ? ('0' + MM) : MM
            let d = date.getDate()
            d = d < 10 ? ('0' + d) : d
            return y + '-' + MM + '-' + d
        }
    },
    watch: {
        leftInfo () {
            this.getCompleted()
        }
    }
}
</script>
